<template>
  <div class="table_box">
    <ul class="de_ul">
        <li v-for="(item,index) in dataObj" :class="{'istrans':isTransfer && index == 1,'isset':isSet && index == 2}" :key="index">
            <p><i>{{item.name}}</i> <span class="add">{{item.value}}</span></p>
            <div v-if="index == 1 && !disable && !isTransfer && this.address == dataObj[1].value.toLocaleLowerCase()" @click="onOff(index)" class="connect">Transfer</div>
            <div v-if="index == 2 && !disable && !isSet && (this.address == dataObj[2].value.toLocaleLowerCase() || this.address == dataObj[1].value.toLocaleLowerCase())"  
            @click="onOff(index)" class="connect">SET</div>
            <div v-if="index == 1 && !disable && isTransfer" class="set_input">
                <el-input v-model="register" placeholder="Enter Ethereum name or address"></el-input>
                <div class="re_btn">
                    <div @click="this.isTransfer = false" class="cancel connect">Cancel</div>
                    <div @click="onTransferAdd()" class="connect">Confirm</div>
                </div>
            </div>
            <div v-if="index == 2 && !disable && isSet" class="set_input">
                <el-input v-model="controller" placeholder="Enter Ethereum name or address"></el-input>
                <div class="re_btn">
                    <div @click="this.isSet = false" class="cancel connect">Cancel</div>
                    <div @click="onSetAdd()" class="connect">Confirm</div>
                </div>
            </div>
        </li>
    </ul>

    <div class="records_box" v-if="isRecords">
        <div class="re_header flex">
            <p>Records</p>
        </div>
        <div class="re_con border_bot">
            <h4>ADDRESSES</h4>
            <ul class="de_ul">
                <li v-for="(item,index) in addressObj" :key="index">
                    <p>
                        <i>{{item.name}}</i> 
                        <span v-if="!item.isEdit" class="add">{{item.value == ''?'Not Set':item.value}}</span>
                        <!-- <span  class="add">{{item.value == ''?'Not Set':item.value}}</span> -->
                        <span v-if="item.isEdit" class="input_de">
                            <el-input class="input" placeholder="Please set up" v-model="item.input"></el-input>
                            <el-icon @click="item.value = ''" :size="16" color="#aaa"><Delete /></el-icon>
                        </span>
                    </p>
                    <div v-if="!disable">
                        <span v-if="!item.isEdit"  @click="isEdit(item)" class="bule">Edit</span>
                        <div v-if="item.isEdit" class="re_btn_set">
                            <div @click="item.isEdit = false">Cancel</div>
                            <div @click ="onSet(item,index)" class="set">Set</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="re_con">
            <h4>TEXT RECORD</h4>
            <ul class="de_ul">
                <li v-for="(item,index) in recordObj" :key="index">
                   <p>
                        <i>{{item.name}}</i> 
                        <span v-if="!item.isEdit" class="add">{{item.value == ''?'Not Set':item.value}}</span>
                        <!-- <span  class="add">{{item.value == ''?'Not Set':item.value}}</span> -->
                        <span v-if="item.isEdit" class="input_de">
                            <el-input class="input" placeholder="Please set up" v-model="item.input"></el-input>
                            <el-icon @click="item.value = ''" :size="16" color="#aaa"><Delete /></el-icon>
                        </span>
                    </p>
                    <div v-if="!disable">
                        <span v-if="!item.isEdit"  @click="isEdit(item)" class="bule">Edit</span>
                        <div v-if="item.isEdit" class="re_btn_set">
                            <div @click="item.isEdit = false">Cancel</div>
                            <div @click ="onSetr(item,index)" class="set">Set</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons'
import namehash  from 'eth-ens-namehash'

export default {
    props:['disable','address'],
    data(){
        return {
            // TransferAdd:'',
            // setAdd:'',
            isTransfer:false,
            isSet:false,
            register:'',
            controller:'',
            isRecords:false,
            dataObj:[
                {name:'PARENT',value:'web3'},
                {name:'REGISTRANT',value:'--'},
                {name:'CONRTOLLER',value:'--'},
                {name:'EXP DATE',value:'--'},
            ],
            addressObj:[
                {name:'ETH',value:'--',input:''},
                {name:'BSC',value:'--',input:''},
                {name:'LTC',value:'--',input:''},
            ],
            recordObj:[
                {name:'email',value:'--',input:''},
                {name:'url',value:'--',input:''},
                {name:'avatar',value:'--',input:''},
                {name:'description',value:'--',input:''},
                {name:'com.discord',value:'--',input:''},
                {name:'com.qithub',value:'--',input:''},
                {name:'com.twitter',value:'--',input:''},
                {name:'org.telegram',value:'--',input:''},
            ]
        }
    },
    async mounted(){
        console.log('this.address')
        console.log(this.address)
        // debugger
        this.title = this.$route.query.title || null
        
        let labelhash = window.web3js.utils.keccak256(this.title)
        let namehash1 = namehash.hash(this.title+'.web3')
        
        namehash1 = window.web3js.utils.toHex(namehash1)
        console.log('namehash1,labelhash,this.title')
        console.log(namehash1,labelhash,this.title)
        
        if(window.contract5 && this.address){
            
            // console.log(window.contract5)
            try {
                this.dataObj[1].value = await window.contract5.methods.ownerOf(labelhash).call()
                this.isRecords = true
            } catch (error) {
                this.dataObj = [
                    {name:'PARENT',value:'web3'},
                    {name:'REGISTRANT',value:'unRegistered'},
                    {name:'CONRTOLLER',value:'unRegistered'},
                    {name:'EXP DATE',value:'unRegistered'},
                ]
                return
            }
            let expdate  = await window.contract5.methods.nameExpires(labelhash).call()
            if(expdate){
                this.dataObj[3].value = new Date(parseInt(expdate + '000')).toUTCString()
            }
        }else{
            this.dataObj = [
                {name:'PARENT',value:'web3'},
                {name:'REGISTRANT',value:'Not connected'},
                {name:'CONRTOLLER',value:'Not connected'},
                {name:'EXP DATE',value:'Not connected'},
            ]
            return
        }
        if(window.contract3){
            console.log('namehash1')
            console.log(namehash1)
            let Conrtoller  = await window.contract3.methods.owner(namehash1).call() || ''
            if(Conrtoller){
                this.dataObj[2].value = Conrtoller || ''
            }
            console.log('Conrtoller')
            console.log(Conrtoller)
        }
        if(window.contract4){
            console.log('window.contract4')
            console.log(window.contract4)
            this.addressObj[0].value  = this.addressObj[0].input =  await window.contract4.methods.addr(namehash1,60).call() || '';
            this.addressObj[1].value  = this.addressObj[1].input = await window.contract4.methods.addr(namehash1,2).call() || '';
            this.addressObj[2].value  = this.addressObj[2].input = await window.contract4.methods.addr(namehash1,3).call() || '';

            this.recordObj[0].value  = this.recordObj[0].input = await window.contract4.methods.text(namehash1,"email").call() || '';
            this.recordObj[1].value  = this.recordObj[1].input = await window.contract4.methods.text(namehash1,"url").call() || '';
            this.recordObj[2].value  = this.recordObj[2].input = await window.contract4.methods.text(namehash1,"avatar").call() || '';
            this.recordObj[3].value  = this.recordObj[3].input = await window.contract4.methods.text(namehash1,"description").call() || '';
            this.recordObj[4].value  = this.recordObj[4].input = await window.contract4.methods.text(namehash1,"com.discord").call() || '';
            this.recordObj[5].value  = this.recordObj[5].input = await window.contract4.methods.text(namehash1,"com.qithub").call() || '';
            this.recordObj[6].value  = this.recordObj[6].input = await window.contract4.methods.text(namehash1,"com.twitter").call() || '';
            this.recordObj[7].value  = this.recordObj[7].input = await window.contract4.methods.text(namehash1,"org.telegram").call() || '';
        }
    },
    methods:{
        async onSet(item){
            // console.log(item.input)
            let namehash1 = namehash.hash(this.title+'.web3')
            let id;
            if(item.name == 'ETH'){
                id = 60
            }
            if(item.name == 'BSC'){
                id = 2
            }
            if(item.name == 'LTC'){
                id = 3
            }
            if(item.input == ''){
                ElMessage.error('Please Set')
                return
            }
            this.$loadinga()
            try {
                this.$utils.Tx(await window.contract4.methods.setAddr(namehash1,id,item.input),this.address,null,(res)=>{ 
                    if(res){
                        item.value = item.input
                        item.isEdit = false
                    }
                    this.$loadinga(true)
                    console.log(res)
                },(err)=>{
                    item.isEdit = false
                    item.input = ''
                    this.$loadinga(true)
                    ElMessage.error(err)
                })
            } catch (error) {
                ElMessage.error(error.message)
                this.$loadinga(true)
                item.isEdit = false
                item.input = ''
            }
            
        },
        async onSetr(item){
            let namehash1 = namehash.hash(this.title+'.web3')
            if(item.input == ''){
                ElMessage.error('Please Set')
                return
            }
            this.$loadinga()
            try {
                this.$utils.Tx(await window.contract4.methods.setText(namehash1,item.name,item.input),this.address,null,(res)=>{ 
                    if(res){
                        item.value = item.input
                        item.isEdit = false
                    }
                    this.$loadinga(true)
                    console.log(res)
                },(err)=>{
                    item.isEdit = false
                    item.input = ''
                    this.$loadinga(true)
                    ElMessage.error(err)
                })
            } catch (error) {
                ElMessage.error(error.message)
                this.$loadinga(true)
                item.isEdit = false
                item.input = ''
            }
            
        },
        isEdit(item){
            item.isEdit = !item.isEdit
        },
        onOff(val){
            if(val == 1){
                this.isTransfer = true
            }
            if(val == 2){
                this.isSet = true
            }
        },
        async onTransferAdd(){
            // console.log();
            if(this.register == ''){
                ElMessage.error('please input')
                return
            }

            this.$loadinga()
            let labelhash = window.web3js.utils.keccak256(this.title)
            this.$utils.Tx(await window.contract5.methods.safeTransferFrom(this.dataObj[1].value,this.register,labelhash),this.address,null,(res)=>{      
                if(res){
                    this.dataObj[1].value = this.register
                    this.register = ''
                    this.isTransfer = false
                    ElMessage.success('Transfer success')
                }
                this.$loadinga(true)
                console.log(res)
            },(err)=>{
                // alert(1)
                this.register = ''
                this.isTransfer = false
                this.$loadinga(true)
                ElMessage.error(err)
            })

        },
        async onSetAdd(){
            if(this.controller == ''){
                ElMessage.error('please input')
                return
            }
            let labelhash = window.web3js.utils.keccak256(this.title)
            let namehash1 = namehash.hash(this.title+'.web3')
            if(this.address == this.dataObj[2].value.toLocaleLowerCase()){
                this.$loadinga()
                
                this.$utils.Tx(await window.contract3.methods.setOwner(namehash1,this.controller),this.address,null,(res)=>{      
                    if(res){
                        this.dataObj[2].value = this.controller
                        this.controller = ''
                        this.isSet = false
                        ElMessage.success('Set success')
                    }
                    this.$loadinga(true)
                    console.log(res)
                },(err)=>{
                    this.controller = ''
                    this.isSet = false
                    this.$loadinga(true)
                    ElMessage.error(err)
                })
                return
            }

            if(this.address == this.dataObj[1].value.toLocaleLowerCase()){
                this.$loadinga()
                
                this.$utils.Tx(await window.contract5.methods.reclaim(labelhash,this.controller),this.address,null,(res)=>{      
                    if(res){
                        this.dataObj[2].value = this.controller
                        this.controller = ''
                        this.isSet = false
                        ElMessage.success('Set success')
                    }
                    this.$loadinga(true)
                    console.log(res)
                },()=>{
                    this.controller = ''
                    this.isSet = false
                    this.$loadinga(true)
                })
            }
            // console.log(this.$store.state,this.dataObj[1].value)
        }
    },
    components:{
        Delete
    }
}
</script>


<style lang="less" scoped>
    .set_input{width: 94%;margin: 0 auto;}
    .table_box .de_ul li{
        height: 58px;line-height: 58px;
        flex-wrap: wrap;
        transition: .5s;
        justify-content: space-between;
    }
    .table_box .de_ul li.istrans,.table_box .de_ul li.isset{
        height: auto;
        padding-bottom: 20px;
        background: #D3DEEA;
        margin: 10px 0;
        align-items: flex-start;
        span{
            color: #2481E2;
            font-size: 16px;
            line-height: 24px;
            display: inline-block;
            height: 24px;
            padding-left: 30px;
            background: url("@/assets/img/avatars.png") no-repeat left center;
            background-size: 24px 24px;
        }
    }

    .table_box .de_ul li i{display:inline-block;width: 150px;}
    .table_box .de_ul li span{color:#aaa;padding: 0;}
    
    .records_box{margin-top: 24px;box-shadow: 0px 1px 2px #ddd;;border-radius:10px}
    .records_box .re_header{background: #D3DEEA;padding: 18px;padding-right: 30px;border-radius: 10px 10px 0 0;}
    .re_header span{
        color: #2481E2;
        font-weight: 600;
        cursor: pointer;
    }
    .re_header p{color:#fff;font-weight: 600;font-size: 16px;}
    .re_header span:hover{
        color: #3b8fea;
    }
    .records_box .re_con{
        display: flex;
        padding: 15px 10px;
        
    }
    .border_bot{
        border-bottom: 1px solid #DFE1E2;
    }
    .records_box .re_con h4{
        font-size: 13.5px;
        height: 30px;
        width: 150px;
        line-height: 30px;
        font-weight: 600;
    }
    .records_box .re_con .de_ul,.records_box .re_con li .input_de{flex: 1;}
    .records_box .re_con li .input_de{display: flex;justify-content: space-between;align-items: center;}
    .records_box .re_con li .input_de .el-icon{flex: 0 0 20px;margin-left: 10px;cursor: pointer;}
    .records_box .re_con li{
        height: 30px;line-height: 30px;border: 0;margin-bottom: 10px;display: flex;justify-content: space-between;
        p{
            display: flex;align-items: center;
        }
        div{
            display: flex;
            justify-content: flex-end;
            // padding-right: 10px;
            flex: 1;
            .bule{
                color:#2481E2;
                cursor: pointer;
            }
            .re_btn_set{
                display: flex;
                padding: 0;
                justify-content:flex-end;
                div{
                    background: #f05d5d;
                    margin-left: 5px;
                    color:#fff;
                    border-radius: 5px;
                    font-size: 13.5px;
                    display: block;
                    cursor: pointer;
                    text-align: center;
                    flex: auto;
                    height: 28px;
                    line-height: 28px;
                }
                div.set{
                    background: #2481E2;
                }
            }
        }
    }
    .records_box .re_con li i{font-size: 13.5px;}
    .records_box .re_con li span{font-size: 14px;}
    .records_box /deep/.el-input__inner {
        color: #aaa;
        font-size: 14px;
    }
    .r_con .re_btn{
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
        div{
            margin-left: 20px;
        }
        .cancel{
            background: #ccc;
        }
    }
    
</style>
